<template>
  <el-row :class="prefixCls" :gutter="20" justify="space-between">
    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="2" animated>
          <template #default>
            <div :class="`${prefixCls}__item flex justify-between`">
              <div>
                <div
                  :class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
                >
                  <!-- <Icon :size="40" icon="svg-icon:peoples" /> -->
                  <Icon :size="40" icon="svg-icon:member_level" />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">
                  <!-- {{ t('analysis.newUser') }} -->
                  活跃招聘
                </div>
                <CountTo
                  :duration="1000"
                  :end-val="statistics.positionCount"
                  :start-val="0"
                  class="text-right text-20px font-700"
                />
                <div :class="`${prefixCls}__item--text text-12px text-gray-500 text-right`">
                  岗位
                </div>
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>

    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="2" animated>
          <template #default>
            <div :class="`${prefixCls}__item flex justify-between`">
              <div>
                <div
                  :class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`"
                >
                  <!-- <Icon :size="40" icon="svg-icon:message" /> -->
                  <Icon :size="40" icon="svg-icon:peoples" />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">
                  <!-- {{ t('analysis.unreadInformation') }} -->
                  候选人
                </div>
                <CountTo
                  :duration="1000"
                  :end-val="statistics.candidateCount"
                  :start-val="0"
                  class="text-right text-20px font-700"
                />
                <div :class="`${prefixCls}__item--text text-12px text-gray-500 text-right`">
                  进行中
                </div>
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>

    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="2" animated>
          <template #default>
            <div :class="`${prefixCls}__item flex justify-between`">
              <div>
                <div
                  :class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`"
                >
                  <!-- <Icon :size="40" icon="svg-icon:money" /> -->
                  <Icon :size="40" icon="svg-icon:send" />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">
                  <!-- {{ t('analysis.transactionAmount') }} -->
                  平均招聘周期
                </div>
                <CountTo
                  :duration="1000"
                  :end-val="statistics.recruitmentPeriodCount"
                  :start-val="0"
                  class="text-right text-20px font-700"
                />
                <div :class="`${prefixCls}__item--text text-12px text-gray-500 text-right`">
                  天
                </div>
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>

    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="2" animated>
          <template #default>
            <div :class="`${prefixCls}__item flex justify-between`">
              <div>
                <div
                  :class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`"
                >
                  <!-- <Icon :size="40" icon="svg-icon:shopping" /> -->
                  <Icon :size="40" icon="svg-icon:member_point" />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">
                  <!-- {{ t('analysis.totalShopping') }} -->
                  人才库总量
                </div>
                <CountTo
                  :duration="1000"
                  :end-val="statistics.talentCount"
                  :start-val="0"
                  class="text-right text-20px font-700"
                />
                <div :class="`${prefixCls}__item--text text-12px text-gray-500 text-right`">
                  万人
                </div>
              </div>
            </div>
          </template>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
  <!-- <el-row :gutter="20" justify="space-between">
    <el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" animated>
          <Echart :height="300" :options="pieOptionsData" />
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" animated>
          <Echart :height="300" :options="barOptionsData" />
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-card class="mb-20px" shadow="hover">
        <el-skeleton :loading="loading" :rows="4" animated>
          <Echart :height="350" :options="lineOptionsData" />
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row> -->

  <el-row :gutter="20" justify="space-between">
    <el-col :span="24">
      <el-card class="mb-20px" shadow="hover">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="12">
            <el-input
              v-model="searchContent"
              size="large"
              placeholder="搜索职位、技能、区域..."
              @change="searchContentChange"
              clearable
            />
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20" justify="end">
              <el-button type="primary" @click="openForm('create')">发布新招聘</el-button>
              <el-button type="success">筛选</el-button>
              <el-button type="info">导出</el-button>
              &nbsp;
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>

  <el-row :gutter="20" justify="space-between">
    <el-col :span="24">
      <el-card class="mb-20px" shadow="hover">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabChange">
          <el-tab-pane label="进行中招聘" name="101">&nbsp;</el-tab-pane>
          <el-tab-pane label="已录用" name="102">&nbsp;</el-tab-pane>
          <el-tab-pane label="面试安排" name="103">&nbsp;</el-tab-pane>
          <el-tab-pane label="人才储备库" name="104">&nbsp;</el-tab-pane>
        </el-tabs>

        <div v-if="activeName == '101'">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) of list" :key="index">
              <positionItem :item="item"  @update="getList()" />
            </el-col>
          </el-row>
        </div>

        <div v-else>
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) of list" :key="index">
              <resumeItem :item="item" />
            </el-col>
          </el-row>
        </div>

        <Pagination2
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
      </el-card>
    </el-col>
  </el-row>

  <!-- 表单弹窗：添加/修改 -->
  <RecruitmentPositionForm ref="formRef" @success="getList" />

  <!-- 查看岗位候选人 -->
  <RecruitmentResumeDelivery ref="formRef2" />
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'

import { useDesign } from '@/hooks/web/useDesign'
import type { AnalysisTotalTypes } from './types'

import type { TabsPaneContext } from 'element-plus'

import * as UserApi from '@/api/system/user'

import { RecruitmentPositionApi, RecruitmentPositionVO } from '@/api/hospital/recruitment.position'
import RecruitmentPositionForm from './subModule/RecruitmentPositionForm.vue'
import RecruitmentResumeDelivery from './subModule/resumedelivery/index.vue'

import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'

import { ArrowRightBold, Edit } from '@element-plus/icons-vue'

import { formatDate } from '@/utils/formatTime'

import { positionItem, resumeItem } from '@/components/Hospital'

defineOptions({ name: 'Home' })

const loading = ref(true)
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('panel')

const searchContent = ref('')

const activeName = ref('101')

const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 4
})

const statistics = ref({
  positionCount: 0,
  candidateCount: 0,
  recruitmentPeriodCount: 0,
  talentCount: 0,
});

loading.value = false

const onLoadStatistics = async() => {
   try {
    const data = await RecruitmentPositionApi.queryStatistics()
    console.log('data', data)
    statistics.value = data;
  } finally {
    // loading.value = false
  }
}

/** 查询列表 */
const getList = async () => {
  // loading.value = true
  try {
    const data = await RecruitmentPositionApi.getRecruitmentPositionPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    // loading.value = false
  }
}

const dealSearch = async () => {
  // console.log('当前值2:', activeName.value)

  let queryParams2: any

  switch (activeName.value) {
    case '101':
      console.log('101')
      queryParams2 = JSON.parse(JSON.stringify(queryParams))
      queryParams2.name = searchContent.value

      try {
        const data = await RecruitmentPositionApi.getRecruitmentPositionPage(queryParams2)
        list.value = data.list
        total.value = data.total
      } finally {
        // loading.value = false
      }
      break
    case '102':
      console.log('102')
      queryParams2 = JSON.parse(JSON.stringify(queryParams))
      queryParams2.tag = "employed";
      queryParams2.searchContent = searchContent.value

      try {
        const data = await RecruitmentPositionApi.getRecruitmentResumePage(queryParams2)
        list.value = data.list
        total.value = data.total
      } finally {
        // loading.value = false
      }
      break
    case '103':
      console.log('102')
      queryParams2 = JSON.parse(JSON.stringify(queryParams))
      queryParams2.tag = "interview_schedule";
      queryParams2.searchContent = searchContent.value

      try {
        const data = await RecruitmentPositionApi.getRecruitmentResumePage(queryParams2)
        list.value = data.list
        total.value = data.total
      } finally {
        // loading.value = false
      }
      break
    case '104':
      console.log('102')
      queryParams2 = JSON.parse(JSON.stringify(queryParams))
      queryParams2.tag = "talent_pool";
      queryParams2.searchContent = searchContent.value

      try {
        const data = await RecruitmentPositionApi.getRecruitmentResumePage(queryParams2)
        list.value = data.list
        total.value = data.total
      } finally {
        // loading.value = false
      }
      break
    default:
    // 默认代码块
  }

  console.log('list')
  console.log(list.value)
}

const searchContentChange = (newValue) => {
  // console.log('当前值:', newValue)
  // console.log('当前值2:', searchContent.value)
  // 执行业务逻辑
  dealSearch()
}

const tabChange = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab.props.name, event)
  // console.log('当前值3:', activeName.value)
  activeName.value = tab.props.name ? tab.props.name.toString() : activeName.value
  dealSearch()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 岗位候选人 */
const formRef2 = ref()
const openForm2 = (item: any) => {
  formRef2.value.open(item.id, item.name)
}

/** 初始化 */
onMounted(() => {
  onLoadStatistics();
  dealSearch()
})
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-panel;

.#{$prefix-cls} {
  &__item {
    &--peoples {
      color: #40c9c6;
    }

    &--message {
      color: #36a3f7;
    }

    &--money {
      color: #f4516c;
    }

    &--shopping {
      color: #34bfa3;
    }

    &:hover {
      :deep(.#{$namespace}-icon) {
        color: #fff !important;
      }

      .#{$prefix-cls}__item--icon {
        transition: all 0.38s ease-out;
      }

      .#{$prefix-cls}__item--peoples {
        background: #40c9c6;
      }

      .#{$prefix-cls}__item--message {
        background: #36a3f7;
      }

      .#{$prefix-cls}__item--money {
        background: #f4516c;
      }

      .#{$prefix-cls}__item--shopping {
        background: #34bfa3;
      }
    }
  }
}
</style>
